<template>
	<view class="page">
		<view class="">
			{{wordHead}}
		</view>
		<up-popup :show="show" mode="center" round='20'>
			<view class="popup">
				<view class="popup_head">
					温馨提示
				</view>
				<view class="popup_cont">
					啊哦，你没有需要测试的单词，
				</view>
				<view class="popup_cont">
					请先去记单词
				</view>
				<view class="popup_cont">
					你还未开启16区记忆学习，学习后你才能进行“区找单词”测试
				</view>

				<view class="popup_btn" @click="back">
					知道了
				</view>
			</view>
		</up-popup>
		<up-popup :show="areaShow" @close="close" @open="open" mode="center" round='10'>
			<view class="popup popup_box">
				<view class="popup_head">
					测试区
				</view>
				<view class="popup_cont">
					第{{total_page}}页{{total_big_sort}}-{{total_small_sort}}区块
				</view>
				<view class="popup_btn" @click="nextClick">
					下一步
				</view>
			</view>
		</up-popup>

		<up-popup :safeAreaInsetBottom="false" mode="center" round="5" :show="phoneShow" @close="close"
			@open="phoneShow = true">
			<view class="popupBox fontSize-28">
				<view class="width-full weight-700 text-center">
					{{total_page}}-{{total_big_sort}}-{{total_small_sort}}
				</view>

				<view class="flex column marginTop-30">
					<view class="flex items-center space-between height-120" v-for="(it,i) in wordList" :key="i">
						<view class="flex items-center space-between height-120" v-if='it.wordId==temptrue_wordId'>
							<view class="fontSize-30 weight-700" style="min-width: 200rpx;">
								{{parseInt(i)+1}}.{{it.wordHead}}
							</view>
							<view class="width-full">
								<view class="wordsDefaultText fontSize-24 ">
									<view class="marginBottom-5" v-for="(t,id) in returnVal(it.tran)" :key="id">
										{{t}}
									</view>
								</view>
							</view>
						</view>
						<view class="flex items-center space-between height-120" v-else>
							<view class="fontSize-30 weight-700" style="min-width: 200rpx;">
								{{parseInt(i)+1}}
							</view>

						</view>
					</view>
				</view>
				<view class="width-full marginTop-30 box-sizing btns flex column items-center flex-center">
					<view class="marginTop-30 " style="width: 80%;">
						<up-button @click="continueClick()" size="normal" type="primary" plain
							text="记住了，继续为下个单词找家"></up-button>
							<view class="marginTop-15">
								<up-button @click="backIndex" size="normal" type="primary" :plain='true'
									text="结束,返回首页"></up-button>
							</view>
					</view>
				</view>
			</view>
		</up-popup>
		<up-modal :show="errorShow" @confirm='confirm' confirmText='去查看'>
			<view class="text-center">
				哦哦，选错了。没关系我们去看一下吧！
			</view>
		</up-modal>
		<view class="" v-if="type==1">
			<view class="head">
				<view class="head_title text-center padding-10">
					第{{total_page}}页{{total_big_sort}}-{{total_small_sort}}小家
				</view>
				<view class="head_cont text-center padding-10">
					请在下列单词中，选出在该小家的单词
				</view>
			</view>
			<view class="word_lists   flex space-between flex-wrap">
				<view class="word_list text-center marginBottom-20" v-for="(i,v) in options" :key="v" :class="[  
				        { hover: current==v }, // 假设 current 是当前选中的索引  
				        { wordHover: i.wordId==true_wordId },  
			
				      ]" @click="tabsClick(i,v)">
					{{i.wordHead}}
				</view>
			</view>
		</view>
		<view class="head " v-if="type==2">
			<view class="word_name marginBottom-20">
				{{wordHead}}
			</view>
			<view class="flex space-between items-center marginBottom-10" @click="playClick()">
				<view class="word_pro">
					/音标/
				</view>
				<view class="">
					{{total_page}}-{{total_big_sort}}-{{total_small_sort}}
				</view>
			</view>
			<view class="word_warn ">
				先回想词义再选择，想不起来看【提示】
			</view>
			<view class=" select_lists">
				<view class="select_list marginTop-20" v-for="(i,v) in options" :key="v" @click="tabsClick6(i,v)">
					<text :class="[
					    { hover: current6==v }, // 假设 current 是当前选中的索引  
					    { wordHover: i.wordId==true_wordId },  
					    { errHover: i.wordId==error_wordId}  
					  ]"> {{i.tran}}</text>
				</view>
			</view>
			<view class="warn_title marginTop-50 text-center" @click="confirm">
				提示
			</view>
		</view>
		<view class="" v-if="type==3">
			<view class="head">
				<image src="../../../static/logo.png" mode="" class="head_success"></image>
				<view class="head_success_title" style="margin-bottom: 40rpx;">
					本区单词已测试完成
				</view>
				<view class="flex items-center head_list">
					<view class="head_success_list">
						<view class="h_s_l_num">
							+{{test_result.stren_count}}
						</view>
						<view class="h_s_l_tit">
							强化单词
						</view>
					</view>
					<view class="head_success_list">
						<view class="h_s_l_num">
							+{{test_result.correct_count}}
						</view>
						<view class="h_s_l_tit">
							修复单词
						</view>
					</view>
					<view class="head_success_list">
						<view class="flex items-end flex-center">
							<view class="h_s_l_time">
								{{minutes}}
							</view>
							<view class="h_s_l_tit">
								分
							</view>
							<view class="h_s_l_time">
								{{second}}
							</view>
							<view class="h_s_l_tit">
								秒
							</view>
						</view>
						<view class="h_s_l_tit">
							强化单词
						</view>
					</view>

				</view>
				<view class="head_success_cont">
					单词测试
				</view>
				<view class="fontSize-24" style="padding-left: 100rpx;">
					<text class="skyBlue">
						科学记忆
					</text>
					<text class="h_s_l_tit" style="margin-left: 5rpx;">
						对抗遗忘，每个单词都有家，红旗老师位置记忆法.
					</text>
				</view>
			</view>
		</view>
		<view class="fixed" v-if="type==1">
			<view class="open_warn" @click="confirm2">
				查看单词小家
			</view>
			<up-button @click="submit" size="normal" type="primary" text="确定"></up-button>
		</view>
		<view class="fixed" v-if="type==2&&jxStatus">
			<up-button @click="continueClick" size="normal" type="primary" text="继续"></up-button>
		</view>
		<view class="fixed" v-if="type==3">
			<up-button @click="jixu" size="normal" type="primary" text="继续测"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick,
		inject
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onHide,
		onShow
	} from '@dcloudio/uni-app'
	const getTestAreaApi = inject('getTestArea');
	const getTestAreaWordApi = inject('getTestAreaWord')
	const selectedAreaOptionsApi = inject('selectedAreaOptions')
	const getAreaWordsViewApi = inject('getAreaWordsView')
	const show = ref(false)
	const type = ref(0)
	const test_area_id = ref('');
	const total_big_sort = ref('');
	const total_page = ref('');
	const total_small_sort = ref('');
	const areaShow = ref(false)
	const options = ref([]);
	const current = ref(-1);
	const current6 = ref(-1);
	const test_id = ref('')
	const wordId = ref('')
	const wordList = ref([]);
	const errorShow = ref(false)
	const phoneShow = ref(false)
	const true_wordId = ref('')
	const error_wordId = ref('')
	const temptrue_wordId = ref('')
	const wordHead = ref('')
	const IsPrompt = ref(false);
	const jixuShow = ref(true)
	const isEnd = ref('') //isEnd 0 未结束 isEnd //1
	const jxStatus = ref(false)
	const test_result = ref({})
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	innerAudioContext.onCanplay(() => {});
	innerAudioContext.onPlay((e) => {})
	innerAudioContext.onEnded((e) => {})
	const minutes = ref('')
	const second = ref('')




	
	onLoad(() => {
		getTestAreaApi({

		}).then(res => {
			console.log(res, 196)
			if (res.status == 201) {
				type.value = 0
				show.value = true
			} else {
				test_area_id.value = res.areaInfo.test_area_id
				total_big_sort.value = res.areaInfo.total_big_sort
				total_page.value = res.areaInfo.total_page
				total_small_sort.value = res.areaInfo.total_small_sort
				getTestAreaWordApi({
					test_area_id: test_area_id.value
				}).then(rq => {
					console.log(rq, 63)
					type.value = 0
					areaShow.value = true
					options.value = rq.options
					test_id.value = rq.test_id
					temptrue_wordId.value = rq.wordInfo.wordId
					wordHead.value = rq.wordInfo.wordHead
					isEnd.value = rq.is_end
				});
			}

		});
	});

	const nextClick = () => {
		areaShow.value = false
		type.value = 1
	}


	const continueClick = () => {
		current6.value = -1
		if (isEnd.value == 0) {
			type.value = 1
			getTestAreaWordApi({
				test_area_id: test_area_id.value
			}).then(rq => {
				console.log(rq, 63)
				type.value = 1
				options.value = []
				isEnd.value = rq.is_end
				if (isEnd.value == 1) {
					type.value = 3
					phoneShow.value = false
					if (rq.test_result) {
						test_result.value = rq.test_result
						let minutes2 = Math.floor(rq.test_result.times / 60);
						let second2 = rq.test_result.times - minutes2 * 60;
						minutes.value = minutes2
						second.value = second2
					}
				}

				options.value = rq.options
				test_id.value = rq.test_id
				temptrue_wordId.value = rq.wordInfo.wordId
				wordHead.value = rq.wordInfo.wordHead
				true_wordId.value = ''
				current.value = '-1'
				error_wordId.value = ''

				phoneShow.value = false


			});
		}

	}
	const tabsClick = (i, v) => {
		current.value = v
		wordId.value = i.wordId
	}
	const playClick = () => {
		
		innerAudioContext.stop();
		innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${wordHead.value}&type=1`;
		innerAudioContext.play();
		console.log('播放')
	}
	
	const tabsClick6 = (i, v) => {
		current6.value = v
		wordId.value = i.wordId
		jxStatus.value = true
		selectedAreaOptionsApi({
			test_id: test_id.value,
			type: type.value,
			options: wordId.value,
		}).then(es => {
			console.log(es, 77)
			true_wordId.value = temptrue_wordId.value
		})
	}
	const back = () => {
		uni.navigateBack()
	}
	const confirm2 = () => {
		errorShow.value = false
		IsPrompt.value = true
		getAreaWordsViewApi({
			page: total_page.value,
			big_sort: total_big_sort.value,
			small_sort: total_small_sort.value,
		}).then(res => {
			console.log(res, 115)
			wordList.value = res.wordList
			phoneShow.value = true
		})
	}
	const confirm = () => {
		errorShow.value = false
		IsPrompt.value = true
		getAreaWordsViewApi({
			page: total_page.value,
			big_sort: total_big_sort.value,
			small_sort: total_small_sort.value,
		}).then(res => {
			console.log(res, 115)
			wordList.value = res.wordList
			phoneShow.value = true
		})
	}
	const submit = () => {
		if (wordId.value == '') {
			uni.showToast({
				title: '请先选择您的答案！',
				icon: 'none'
			})
		} else {
			selectedAreaOptionsApi({
				test_id: test_id.value,
				type: type.value,
				options: wordId.value,
			}).then(es => {
				console.log(es, 77)
				if (es.is_true == 0) {
					errorShow.value = true
					if (type.value == 1) {
						error_wordId.value = wordId.value
						true_wordId.value = temptrue_wordId.value
						console.log(error_wordId.value, true_wordId.value)
					}
				} else if (es.is_true == 1) {
					true_wordId.value = ''
					type.value++
				}
			})
		}
	}
	const returnVal = (val) => {
		let valList = val.split('<br>');
		let text = ''
		for (let s of valList) {
			text = `
				${text}
				${s}
			`
		}
		return valList
	}

	const backIndex = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
	const close = () => {
		if (IsPrompt.value == true) {
			selectedAreaOptionsApi({
				test_id: test_id.value,
				type: type.value,
				options: wordId.value,
			}).then(es => {
				uni.redirectTo({
					url: '/pages/index/test/blockFindingWords'
				})
			})

		}
	}
	const jixu = () => {
		uni.redirectTo({
			url: '/pages/index/test/blockFindingWords'
		})
	}
</script>

<style scoped lang="scss">
	.popup {
		width: 690rpx;
		height: 400rpx;

		.popup_head {
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
			padding: 30rpx;
		}

		.popup_cont {
			font-size: 24rpx;
			color: #000;
			text-align: center;
			width: 400rpx;
			margin: 0 auto;
		}

		.popup_btn {
			width: 300rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 24rpx;
			margin: 30rpx auto;
			border: 1rpx solid #000;
		}
	}

	.popup_box {
		width: 630rpx;
		height: 300rpx;
		padding: 0 30rpx;
	}

	.head {
		padding: 20rpx 30rpx;

		.head_title {
			font-size: 30rpx;
			color: #000;
		}

		.head_cont {
			font-size: 24rpx;
			color: #666;
		}
	}

	.word_lists {
		// width: 500rpx;
		padding: 30rpx;
		margin: 0 auto;

		.word_list {
			width: 690rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			font-size: 24rpx;
		}

		.hover {
			background-color: skyblue;
		}

		.errHover {
			background-color: pink;
		}

		.wordHover {
			background-color: aquamarine;
		}
	}

	.fixed {
		bottom: 20rpx;
		width: 690rpx;
		left: 30rpx;

		.open_warn {
			text-align: center;
			padding: 30rpx;
			color: red;
			font-size: 24rpx;
		}
	}

	.popupBox {
		width: 80vw;
		padding: 50rpx 30rpx 30rpx;
		// background-color: #fff;
		// border-radius: 5px;
		box-sizing: border-box;

		.btns {
			// padding-bottom: calc(50rpx);
		}
	}

	.word_name {
		color: #000;
		font-size: 36rpx;
	}

	.word_pro {
		font-size: 28rpx;
	}

	.word_warn {
		color: #999;
		font-size: 24rpx;
	}

	.select_lists {
		margin-top: 80rpx;

		.select_list {
			width: 630rpx;
			// height: 80rpx;
			// line-height: 80rpx;
			color: #000;
			padding: 20rpx 30rpx;
			font-size: 24rpx;
			position: relative;
			background-color: #f5f5f5;

			.hover,
			.errHover {
				transition: all .3s;

				&::before {
					content: "";
					position: absolute;
					inset: 0;
					// top: -10px;
					// left: -10px;
					// right: -10px;
					// bottom: -10px;
					border: 2px solid #ffbfbf;
					border-radius: 10px;
					animation: div5Ani 1s linear;
				}

				&::after {
					content: "";
					position: absolute;
					inset: 0;
					// top: -10px;
					// left: -10px;
					// right: -10px;
					// bottom: -10px;
					border: 2px solid #ffbfbf;
					border-radius: 10px;
					animation: div5Ani 1s linear;
				}

				&::after {
					animation: div5Ani 1s -0.5s linear;
				}
			}

			.wordHover {
				transition: all .3s;

				&::before {
					content: "";
					position: absolute;
					inset: 0;
					// top: -0px;
					// left: -0px;
					// right: -10px;
					// bottom: -10px;
					border: 2px solid #05b602;
					border-radius: 10px;
					animation: div5Ani 1s linear;
				}

				&::after {
					content: "";
					position: absolute;
					inset: 0;
					// top: -10px;
					// left: -10px;
					// right: -10px;
					// bottom: -10px;
					border: 2px solid #05b602;
					border-radius: 10px;
					animation: div5Ani 1s linear;
				}

				&::after {
					animation: div5Ani 1s -0.5s linear;
				}
			}

			@keyframes div5Ani {

				0%,
				100% {
					clip-path: inset(0 0 98% 0);
				}

				25% {
					clip-path: inset(0 98% 0 0);
				}

				50% {
					clip-path: inset(98% 0 0 0);
				}

				75% {
					clip-path: inset(0 0 0 98%);
				}
			}
		}



	}

	.warn_title {
		font-size: 24rpx;
	}

	.head {
		.head_success {
			width: 400rpx;
			height: 200rpx;
			display: block;
			margin: 100rpx auto 40rpx;
		}

		.head_success_title {
			text-align: center;
			font-weight: bold;
			font-size: 30rpx;
		}

		.head_list {
			width: 690rpx;
			height: 120rpx;
			border: 1rpx solid #999;
			border-radius: 5rpx;
		}

		.head_success_list {
			width: 33%;

			.h_s_l_num {
				font-size: 26rpx;
				text-align: center;
			}

			.h_s_l_tit {
				font-size: 26rpx;
				text-align: center;
			}

			.h_s_l_time {
				font-size: 36rpx;
			}
		}

		.head_success_cont {
			margin-top: 80rpx;
			font-weight: bold;
			font-size: 30rpx;
			padding-left: 100rpx;
		}

		.skyBlue {
			color: skyblue;

		}
	}
</style>